<!DOCTYPE html>
<html  ng-app="myApp" >
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
<div>
    <div ng-controller="AppCtrl">
        <div class="col">
            <h3>Messages</h3>
            <div class="overflowable">
                <p ng-repeat="message in messages" ng-class="{alert: message.user == 'chatroom'}">{{message.user}}: {{message.text}}</p>
            </div>
        </div>
        <div class="col">
            <h3>Users</h3>
            <div class="overflowable">
                <p ng-repeat="user in users">{{user}}</p>
            </div>
        </div>
        <div class="clr">
            <form ng-submit="sendMessage()">
                Message:
                <input size="60" ng-model="message">
                <input type="submit" value="Send"></form>
        </div>
        <div class="clr">
            <h3>Change your name</h3>
            <p>Your current user name is {{name}}</p>
            <form ng-submit="changeName()">
                <input ng-model="newName">
                <input type="submit" value="Change Name"></form>
        </div>
    </div>
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="websocket/angular.js"></script>
<script src="/socket.io-client/dist/socket.io.js"></script>

<script src="websocket/app.js"></script>

<script src="websocket/services.js"></script>

<script src="websocket/controller.js"></script>
<script src="websocket/filters.js"></script>
<script src="websocket/directives.js"></script>

</body>
</html>